<template>
    <div class="admin-login">
        <!--<el-menu  class="elMenu el-menu-demo" mode="horizontal" background-color="#021126" text-color="#14ddaa">
            <span class="elMenuText" >企业ERP、CMS、CRM、OA多功能融合SpringCloud微服务系统</span>
        </el-menu>-->
        <el-container>
            <el-main>
                <!--居中布局固定：type=flex justify=center align=middle-->
                <el-row type="flex" justify="center" align="middle" class="mainBody row-bg" :gutter="10">
                    <el-col class="siteDesc">
                        <div class="grid-content bg-purple">
                            <div class="descTitle">
                                <div class="desc-logo"></div>
                                <div class="desc-com">亚盟电商平台</div>
                            </div>
                            <div class="descTitleBody">
                                <div class="desc-author">cevent author</div>
                                <div class="desc-line">
                                    <el-divider content-position="right">www.yameng.shop</el-divider>
                                </div>
                                <div class="desc-intro">
                                    <p>当今兴起的亚盟电商引领21世纪新的消费生活模式，亚盟电商为消费者开启独特的消费体验之旅：
                                        线上到线下的无缝连接，富有创新的门店服务，更加齐全的多品类产品，
                                        高品质的一站式服务满足消费者多样的需求，批发、零售、联盟商家同时上线，
                                        顾客将在所有适合的场景广泛接触到亚盟电商。</p>
                                    <p>在线上、在社区、在工作中，在路上，亚盟电商无时无刻在您身边。</p></div>

                            </div>

                            <div class="desc">亚盟电商一站式微服务管理平台</div>
                        </div>
                    </el-col>
                    <el-col class="loginForm">
                        <div class="loginFormBG grid-content bg-purple-light">
                            <div class="loginTitle">
                                <div class="titleText">管理员登录</div>
                                <div class="titleTextSub">Administrator Login</div>
                            </div>
                            <el-form :model="employee" :rules="rules" ref="ruleForm"
                                     class="loginFormContent" :hide-required-asterisk="true">
                                <el-form-item prop="loginName">
                                    <el-input class="loginInput" placeholder="请输入您的登录名" v-model="employee.loginName">
                                        <template class="loginSpace" slot="prepend">登录名</template>
                                    </el-input>
                                    <span class="inputTag glyphicon glyphicon-user form-control-feedback "
                                          aria-hidden="true"></span>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input class="loginInput" show-password placeholder="请输入您的密码" v-model="employee.password">
                                        <template class="loginSpace" slot="prepend">密码</template>
                                    </el-input>
                                    <span class="inputTag glyphicon glyphicon-lock form-control-feedback "
                                          aria-hidden="true"></span>
                                </el-form-item>
                                <el-form-item prop="imgCode">
                                    <el-input  class="loginInput" placeholder="请输入验证码" v-model="employee.imgCode">
                                        <template class="loginSpace" slot="prepend">验证码</template>
                                        <template slot="append" ><img @click="loadKaptcha" id="kaptchaCode" alt="验证码"></template>
                                    </el-input>

                                    <!--<el-image></el-image>-->
                                </el-form-item>

                                <el-form-item>
                                    <el-checkbox class="rememberBox" v-model="remember" label="记住账号·密码"
                                                 border></el-checkbox>
                                    <el-button class="loginBtn" type="primary" @click="loginForm('ruleForm')">登录</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    //import "../../public/base/js/login/three.min.js";
    //import "../../public/base/js/login/TweenMax.min.js";
    //import "../../public/base/js/login/loginBG.js";
    export default {
        name: 'LoginComp',
        props: {
            msg: String
        },
        data() {
            return {
                message: '这里是登录页面',
                input: '',
                //登录，默认选中存储localStorage
                remember: true,
                employee:{},
                ruleForm: {
                    loginName: '',
                    password: '',
                    imgCode:''
                },
                rules: {
                    loginName: [
                        {required: true, message: '登录名不能为空', trigger: 'blur'},
                        {min: 3, message: '登录名长度在3位以上', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'},
                        {min: 6, message: '密码长度在6位以上', trigger: 'blur'}
                    ],
                    imgCode:[
                        {required: true, message: '请输入验证码', trigger: 'blur'},
                    ]
                },
            }
        },
        mounted() {
            //初始化时，获取本地缓存
            let rememberMe=LocalStorage.get(EMP_LOGIN_LOCAL);
            if(rememberMe){
                this.employee=rememberMe;
            }
            //加载验证码
            this.loadKaptcha();
        },
        methods: {
            loginForm(formName) {
                let responseMsg = '';
                console.log("登录信息：", this.employee);
                //let psd=this.employee.password;
                //避免明文密码存储本地，设置变量md5，判断localStorage中的密文密码是否相等，不相等则更新盐值加密
                let md5=hex_md5(this.employee.password+KEY);
                let rememberEmp=LocalStorage.get(EMP_LOGIN_LOCAL) || {};
                if(md5!==rememberEmp.md5){
                    //请求盐值加密
                    this.employee.password=hex_md5(this.employee.password+KEY);
                }

                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        Loadings.show();
                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/employee/login', this.employee)
                            .then((response) => {
                                Loadings.hide();
                                let resp = response.data;
                                responseMsg = response;
                                if (resp.success) {
                                    console.log("登录成功：", resp.responseData);
                                    //SessionStorage.set(EMP_LOGIN,resp.responseData);
                                    //启用Tool
                                    Tool.setEmpLogin(resp.responseData);
                                    console.log("计入缓存的EMP_LOGIN：",Tool.getEmpLogin());
                                    /**启动localStorage，记住密码
                                     * 避免明文记录密码，对传入的密码进行二次md5加密
                                     */
                                    if(this.remember){
                                        //二次加密
                                        let md5=hex_md5(this.employee.password+KEY);
                                        LocalStorage.set(EMP_LOGIN_LOCAL,{
                                            loginName:resp.responseData.loginName,
                                            password:this.employee.password,
                                            md5:md5
                                        })
                                    }else{
                                        //不勾选remember，清空本地缓存
                                        LocalStorage.remove(EMP_LOGIN_LOCAL);
                                    }

                                    this.$router.push("/system/site/data");
                                    //引入全局变量toast提示
                                    toast.success("登录成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '登录名或密码错误，请重新输入',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                    //登录失败，清空密码，重新生成验证码
                                    this.employee.password='';
                                    this.loadKaptcha();
                                }
                            })
                    } else {
                        console.log('error submit!!');
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position: "top-right",
                            type: 'warning'
                        });
                        //登录失败，清空密码，重新生成验证码
                        this.employee.password='';
                        this.loadKaptcha();
                        return false;
                    }

                });
            },
            //加载验证
            loadKaptcha(){
                console.log("进入验证码方法！");
                //每次刷新验证码，将token放入employee对象；
                this.employee.imgCodeToken=Tool.get8UUID(8);
                //将请求返回的jpg放入id=imgCodeToken的src中
                $("#kaptchaCode").attr('src',process.env.VUE_APP_SERVER + "/business/admin/kaptcha/image-code/"
                    +this.employee.imgCodeToken);
                /*this.$axios.get(process.env.VUE_APP_SERVER + '/business/admin/kaptcha/image-code/'+this.imgCodeToken)
                    .then((response) => {
                      let resp=response.data;
                      this.imgCodeToken=resp.responseData;
                    })*/

            },
            resetForm(formName) {
                //发送token
                Tool.
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>

    .header-title {
        color: steelblue;
        font-weight: bolder;
        text-shadow: 0px 1px 0px #ffffff, 0px 2px 0px #e2d6d6, 0px 3px 0px #e2d6d6, 0px 4px 0px #e2d6d6, 0px 7px 0px #fff3cd, 0px 8px 7px #ffffff;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 100%;
        width: 100%;
        overflow: hidden;
        padding: 0;
    }
    .admin-login{
        position: relative;

    }

    /*body*/
    .mainBody {
        position: relative;
        text-align: left;
        line-height: normal;
        background-image: url("../../public/imgs/ym_bg.jpeg");
        background-repeat: no-repeat;
        background-position: 100%;
        background-size: cover;
        min-height: 700px;
        height: 100vh;

    }

    .el-col {
        border-radius: 4px;
    }

    /*left*/
    .siteDesc {
        background-color: #f44336;
        /*background-color: rgba(244,67,54,.95);*/
        background-image: url("../../public/imgs/ym-bg-2.png");
        min-width: 450px;
        max-width: 600px;
    }

    .descTitle {
        position: relative;
        float: left;
        width: 100%;
        padding: 20px 35px;
    }

    .desc-logo {
        float: left;
        background-image: url("../../public/imgs/site-logo300-1.png");
        background-position: center;
        background-size: 90px;
        width: 90px;
        height: 90px;
        margin-right: 20px;
    }

    .desc-com {
        font-size: 40px;
        line-height: 90px;
        color: white;
    }

    /*left-body*/
    .descTitleBody {
        position: relative;
        float: left;
        width: 100%;
        padding: 20px 35px;
    }

    .desc-author {
        font-size: 20px;
        color: white;
        margin-bottom: 30px;
    }

    .desc-intro {
        font-size: 18px;
        color: white;
        text-indent: 2rem;

    }

    .desc-line {
        position: relative;
    }

    .desc {
        position: relative;
        float: left;
        width: 100%;
        padding: 20px 35px;
        color: white;
    }

    /*right*/
    .loginForm {
        /*background-color: #f0f1f5;*/
        background-color: rgba(240,241,245,.6);
        min-width: 400px;
        max-width: 500px;
        position: relative;
        float: left;
        width: 100%;
        height: 490px;
        padding: 20px 35px;
    }
    .loginFormBG{

    }
    .loginTitle{
        padding: 20px 30px;
    }
    .titleText{
        float: left;
        color: #535252;
        font-size: 30px;
        margin-left: 30px;
        margin-right: 20px;
        line-height: 40px;

    }
    .titleTextSub{
        color: #5f3131;
        line-height: 50px;
    }

    .loginFormContent{
        padding: 20px 30px;
    }
    .inputTag{
        margin-top: 5px;
        color: #409eff;
    }
    .rememberBox{

    }
    .loginBtn{
        float: right;
        width: 200px;
    }
    /deep/ .el-input-group__append{
        padding: 0;
    }
    /deep/ .el-input-group__prepend{
        min-width: 100px;
        text-align: center;
        font-size: 16px;
        padding: 10px 20px;
    }
    /deep/ .el-input__inner{
        height: 50px;
    }

</style>
